<template>
	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<view class="" v-if="scienceList.length>0">
			<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="science" v-for="(item,index) in scienceList" :key="index" @click="goScience(item)">
					<view class="science-item" >
						<view class="item-tit">
							<view class="">
								{{item.title}}
							</view>
							
						</view>
						<view class="item-img">
							<image :src="item.photoUrl" mode=""></image>
						</view>
					</view>
					<view class="bot-box">
						<!-- <view class="time">
							06月16日 07:56
						</view> -->
						<!-- <view class="people">
							<image src="../../static/home/seach.png" mode=""></image>
							<text>142人看过</text>
						</view> -->
					</view>
				</view>
				
			</scroll-view>
		</view>
		<view class="" v-else>
			
		</view>
	</view>
</template>

<script>
	import {
		setStore,
		getStore
	} from "../../utils";
	export default{
		data(){
			return{
				title:"浏览记录",
				scienceList: [
				]
			}
		},
		onShow() {
		    try {
		        // 从本地存储中获取历史记录，如果没有记录则返回空数组
		        const history = getStore("history");
		
		        // 如果有历史记录，尝试解析 JSON
		        if (history) {
		            this.scienceList = JSON.parse(history) || [];
		        } else {
		            this.scienceList = [];
		        }
		    } catch (error) {
		        // 如果解析 JSON 失败，返回空数组
		        console.error('解析历史记录失败:', error);
		        this.scienceList = [];
		    }
		},
		
		methods:{
			goScience(item){
				// 跳转到新的页面
				uni.navigateTo({
				    url: `/integration/science/index?id=${item.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background: #F5F3F0;
		padding: 24rpx;
		padding-top: 212rpx;
		.title{
			background: #fff;
			position: fixed;
			top: 0;
			z-index: 10;
			left: 0;
			width: 100%;
		}
	}
	.scroll-Y{
		height: calc(100vh - 235rpx);
		
		.science{
			background: #fff;
			margin-bottom: 24rpx;
			padding: 24rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.bot-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #B3B3B3;
		margin-top: 16rpx;
		.people{
			image{
				width: 24rpx;
				height: 17rpx;
			}
		}
	}
	.science-item {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
	
		.item-tit {
			width: 520rpx;
	
			view:first-child {
				font-weight: 500;
			}
	
			view:last-child {
				margin-top: 16rpx;
				// white-space: nowrap;
				/* 禁止换行 */
				// overflow: hidden;
				/* 隐藏溢出的内容 */
				// text-overflow: ellipsis;
				/* 显示省略号 */
				// width: 520rpx;
				
				
				width: 470rpx;
			}
		}
	
		.item-img {
			width: 160rpx;
			height: 118rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
	
			image {
				width: 160rpx;
				height: 118rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	
	}
</style>